<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>11-导航二维码居中-案例</title>
		<style type="text/css">
		
			/* F11 prtSc */
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			li{
				list-style:none;
			}
			.box{
				height:36px;
				border-top: 1px solid #dcdde1;
				border-bottom:1px solid #dcdde1;
				margin-top: 30px;
			}
			.box ul{
				width:1080px;
				margin:0 auto;
			}
			.box ul li{
				float: left;
				height:36px;
				width:20%;
				line-height:36px;
				text-align:center;
				border-right:1px solid #d2d2d2;
				box-sizing: border-box;
			}
			.box ul li:last-child{
				border-right:none;
			}
			.box ul li a{
				color:#241c0f;
				font-size:14px;
				display: block;
				height:36px;
			}
			/* 子绝父相 */
			.box ul li a.app{
				/* 相对定位*/
				position: relative;
			}
			.box ul li a.app img{
				position: absolute;
				top:37px;
				/* 让子盒子移动父盒子的一半 */
				left:50%;
				/* 让子盒子移动自己的一半 */
				transform: translateX(-50%);
				border:1px solid #d2d2d2;
				border-top:none;
				/* 默认隐藏 */
				display: none;
			}
			.box ul li a.app:hover img{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href="">我要投资</a></li>
				<li><a href="">平台介绍</a></li>
				<li><a href="">新手专区</a></li>
				<li><a href="" class="app">手机微金所<img src="images/code.jpg" alt=""></a></li>
				<li><a href="">个人中心</a></li>
			</ul>
		</div>
	</body>
</html>
